<template>
  <div class="m-products-list">
    <dl>
      <dd
        v-for="(item,index) in nav"
        :key="index"
        :class="[item.name,item.acitve?'s-nav-active':'']"
        @click="navSelect(index)"
      >{{ item.txt }}</dd>
    </dl>
    <ul>
      <Item v-for="(item,idx) in list" :key="idx" :meta="item" />
    </ul>
  </div>
</template>

<script>
import Item from "./product.vue";
export default {
  components: {
    Item
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      nav: [
         {
          name: 's-default',
          txt: '智能排序',
          acitve: true
        },{
          name: "s-price",
          txt: "价格最低",
          acitve: false
        },{
          name: "s-visit",
          txt: "人气最高",
          acitve: false
        },{
          name: "s-comment",
          txt: "评价最高",
          acitve: false
        }
      ]
    };
  },

  methods: {
    navSelect(index) {
      this.nav.forEach(function(v) {
        v.acitve = false;
      });
      this.nav[index].acitve = true;
    }
  }
};
</script>

<style>
.nav-tab {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-around;
}
.nav-tab a {
  flex: 1;
  text-align: center;
  background: #ccc;
  border-right: 1px solid #ddd;
  cursor: pointer;
}
.nav-tab a.active {
  border-bottom: 1px solid red;
}
.tabs .tab {
  display: none;
}
.tabs .tab.active {
  display: block;
}
</style>